<template>
  <div class="app-container" v-loading="loading">
    <div class="main">
      <detail-top :detail="info" />
      <el-card class="bottom">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane
            :label="item.label"
            :name="item.value"
            v-for="(item, index) of tabs"
            :key="index"
          />
        </el-tabs>
        <firmware v-if="activeName == 'firmware'" :id="id" />
        <authorization v-if="activeName == 'authorization'" :id="id" />
        <!-- <MCP v-if="activeName == 'MCP'" :MCP-list="MCPList" /> -->
      </el-card>
    </div>
    <detault-footer />
  </div>
</template>
<script>
import detailTop from "./components/index/detail-top";
import firmware from "./components/index/firmware";
import authorization from "./components/index/authorization";
import MCP from "./components/index/MCP";
import { productById } from "@/api/login";
export default {
  name: "indexDetail",
  data() {
    return {
      tabs: [
        { label: "固件管理", value: "firmware" },
        { label: "授权管理", value: "authorization" },
        // { label: "MCP接入点", value: "MCP" },
      ],
      activeName: "firmware",
      loading: false,
      MCPList: [],
      id: null,
      info: {},
    };
  },
  components: {
    detailTop,
    firmware,
    authorization,
    MCP,
  },
  methods: {
    // 获取列表数据
    async getList() {
      try {
        const { id } = this;
        this.loading = true;
        const { data } = await productById(id);
        this.info = data || {};
      } catch (error) {
        console.error("登录错误", error);
      } finally {
        this.loading = false;
      }
    },
    // 关闭弹窗
    cancel() {
      this.open = false;
      this.reset();
    },
    // 弹窗提交
    submitForm() {},
    // 添加产品
    handleAdd() {
      this.title = "创建产品（SKU）";
      this.form = {};
      this.open = true;
    },
    // 修改产品
    handleEdit(item) {
      this.title = "编辑产品";
      this.open = true;
    },
    // 表单初始化
    reset() {
      this.form = {};
      this.$refs.child.resetFormFun();
    },
    // tab切换
    handleClick(tab, event) {},
  },
  created() {
    this.id = this.$route.query.id;
    this.getList();
  },
};
</script>
<style lang="scss" scoped>
.bottom {
  margin-top: 22px;
}
.main {
  min-height: calc(100vh - 178px);
}
</style>
